{% extends "base.html" %}
{% import "_macros.html" as macros %}

{% block title %}{{ user.username }}{% endblock %}

{% block page_content %}
<div class="container-fluid">
    <div class="page-header">
        <img class="img-rounded profile-thumbnail profile-avatar" id="user_avatar"
             src="{# url_for('blog.static', filename='img/favicon.ico') #}">
        <div class="profile-header">
            <h1>{{ user.username }}</h1>
            <!-- name 和 location 字段在同一个 <p> 元素中渲染。只有至少定义了这两个字段中的一个时, <p> 元素才会创建。 -->
            {% if user.name or user.location %}
            <p>
                {% if user.name %}{{ user.name }}{% endif %}
                {% if user.name and user.location %},{% endif %}
                {% if user.location %}
                来自
                <a href="http://www.google.cn/maps/place/{{ user.location }}">{{ user.location }}</a>
                {% endif %}
            </p>
            {% endif %}
            <!-- 
            如果登录用户是管理员,那么就显示用户的电子邮件地址,且渲染成mailto链接。
            -->
            {% if current_user.is_administrator %}
            <p><a href="mailto:{{ user.email }}">{{ user.email }}</a></p>
            {% endif %}
            {% if user.about_me %}<p>{{ user.about_me }}</p>{% endif %}
            <p>{{ moment(user.member_since).format('L') }} 加入, {{ moment(user.last_seen).fromNow() }}来看过</p>
            <p>{{ user.posts.count() }} blog posts.</p>

            <p>
                {% if user == current_user %}
                <a class="btn btn-default" href="{{ url_for('.edit_profile') }}">修改资料</a>
                {% endif %}
                {% if current_user.is_administrator %}
                <a class="btn btn-danger" href="{{ url_for('.edit_profile_admin', id=user.id) }}">修改资料 [管理员]</a>
                {% endif %}
            </p>
        </div>
    </div>
</div>  
{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript">
    var data = new Identicon('{{ user.avatar }}', 180).toString();
    $("#user_avatar")[0].src='data:image/png;base64,' + data;
</script>
{% endblock %}